<template>
	<div>
		<el-dialog v-model="showModal" class="peak-dialog" fullscreen :close-on-click-modal="false" :title="title" :width="1200">
			<div id="form-designer">
				<v-form-designer ref="vfDesignerRef" :resetFormJson="true" :designer-config="designerConfig">
					<!-- 自定义按钮插槽 -->
					<template #customToolButtons>
						<el-button link type="primary" @click="onSaveDesigner">
							<el-icon>
								<ele-Finished />
							</el-icon>
							保存
						</el-button>
					</template>
				</v-form-designer>
			</div>
		</el-dialog>
	</div>
</template>
<script setup>
import global from '@/utils/global'
/*
 *@Description: 状态初始化
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-10-07 15:52:04
 */
const vfDesignerRef = ref(null)
// const vfRenderRef = ref(null)

const state = reactive({
	showModal: false,
	title: '',
	paramsForm: {
		id: '',
		content: '',
	},
})

const designerConfig = reactive({
	externalLink: true,
	toolbarMaxWidth: 510,
	// languageMenu: true,
	//externalLink: false,
	//formTemplates: false,
	//eventCollapse: false,
	//clearDesignerButton: false,
	//previewFormButton: false,
})

const { showModal, title } = toRefs(state)
/*
 *@Description: 方法模块
 *@MethodAuthor: liuYuFeng
 *@Date: 2023-10-07 15:52:09
 */
const handleShowModal = async row => {
	console.log(row)
	state.showModal = true
	await nextTick()
	vfDesignerRef.value.clearDesigner()
	state.paramsForm.id = row.id
	state.title = '表单设计 - ' + row.name
	getDataDetail(row.id)
}

const getDataDetail = id => {
	global.$fetchGetData(`/sop-joint-disposal/web/v1/form/details`, { id: id }).then(data => {
		if (data.code == 200) {
			state.paramsForm = data.data || {}
			// 动态表单回显
			vfDesignerRef.value.setFormJson(data.data.content)
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}

const onSaveDesigner = () => {
	const formJson = vfDesignerRef.value.getFormJson()
	state.paramsForm.content = JSON.stringify(formJson)

	global.$fetchPostData(`/sop-joint-disposal/web/v1/form/edit`, state.paramsForm).then(data => {
		if (data.code == 200) {
			global.$baseMessage('保存成功！', 'success')
		} else {
			global.$baseMessage(data.msg, 'error')
		}
	})
}

defineExpose({
	handleShowModal,
})
</script>
<style lang="scss" scoped>
:deep() {
	.el-dialog__body {
		padding: 1px 0px;
		height: 94vh !important;
		max-height: 100vh !important;
		overflow: hidden !important;
	}
}
#form-designer {
	.main-container {
		margin: 0;
	}
	label {
		font-weight: normal;
	}
	:deep(.external-link) {
		display: flex;
		align-items: center;
	}
}
</style>
